import { MobilePageDesigner, Props } from 'components/mobilePageDesigner';
import { StationService as AdminStation } from 'admin/services/station';
import { StationService as UserStation } from 'user/services/stationService';
import { guid } from 'share/common'
import { State as HTMLCotnrolState } from 'components/html/control';
import { AdminApplication } from 'admin/application';
import ReactDOM = require('react-dom');
import * as chitu from "maishu-chitu";
import React = require("react");

export default async function (page: chitu.Page, app: AdminApplication) {

    let arr = page.name.split('_');
    let storePage = arr[arr.length - 1];

    let adminStation = page.createService(AdminStation);
    let userStation = page.createService(UserStation);
    let rightButtons = [];
    let func = userStation.pages[storePage] as Function;
    if (func == null)
        throw new Error(`Store page ${storePage} is not exists.`);

    let showComponentPanel = storePage == 'home';
    let pageData: PageData = await func.apply(userStation.pages);
    let leftButtons: JSX.Element[] = [];
    let showMenuSwitch = true;
    let save = adminStation.savePageData.bind(adminStation);
    if (storePage == 'menu') {
        let menuControl = pageData.controls.filter(o => o.controlName == storePage)[0];
        console.assert(menuControl != null);
        let msg = `<h4 class="text-center" style="line-height:180%;padding:180px 40px 0px 40px">
            <div>点击右边操作面板的</div>
            <b>"点击添加菜单项"</b>
            <div>按钮可以添加菜单项</div>
        </h4>`;

        pageData.controls.push({
            controlName: 'html', controlId: guid(),
            position: 'view', save: false, data: { html: msg } as HTMLCotnrolState,
            selected: 'disabled'
        });
    }
    else if (storePage == 'coupon') {
        showMenuSwitch = false;
        rightButtons = [
            <button key="btn-return" className="btn btn-sm btn-primary"
                onClick={() => app.back()}>
                <i className="icon-reply" />
                <span>返回</span>
            </button>
        ];
        save = () => {
            debugger;
            alert('hello');
            return Promise.resolve();
        }
    }

    
    let props: Props = {
        pageData,
        save,
        showComponentToolbar: storePage == 'home',
        showTemplateButton: storePage == 'home',
        showSnapshootButton: storePage == 'home',
        elementPage: page,
        rightButtons,
    }
    ReactDOM.render(<MobilePageDesigner {...props} />, page.element);
}

